<template>
	<div class="categorytab1">
		<div class="he">
			<!-- 切换的点击区域 -->
			<ul class="title-ul">
				<!-- 当点击事件的时候，标题的默认效果需要切换，选项卡之间也需要切换 -->
				<li  v-for="item in list" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id">
					{{item.name}}
					<span class="default-span"></span>
				</li>
			</ul>
			<!-- 调用两个选项卡的子组件 -->
			<CategoryTab1_one v-if="iscur === 1"></CategoryTab1_one>
			<CategoryTab1_two v-if="iscur === 2"></CategoryTab1_two>
			<CategoryTab1_three v-if="iscur === 3"></CategoryTab1_three>
			<CategoryTab1_four v-if="iscur === 4"></CategoryTab1_four>
		</div>
	</div>
</template>

<script>
	import CategoryTab1_one from './CategoryTab1_one.vue'
	import CategoryTab1_two from './CategoryTab1_two.vue'
	import CategoryTab1_three from './CategoryTab1_three.vue'
	import CategoryTab1_four from './CategoryTab1_four.vue'
	export default{
		name:'CategoryTab1',
		data(){
			return{
				list:[
					{id:1,name:'本周活动'},
					{id:2,name:'下周活动'},
					{id:3,name:'高铁专线'},
					{id:4,name:'摄影采风'},
				],
				iscur : 1//默认选中第一个标题以及第一个组件
			}
		},
		components:{
			CategoryTab1_one,
			CategoryTab1_two,
			CategoryTab1_three,
			CategoryTab1_four
		},
		
	}
</script>

<style scoped>
	.categorytab1{
		width: 100%;
		margin: 0rem auto;
		height: 14rem;
	}
	
	.categorytab1 .title-ul{
		height: 2rem;
		width: 100%;
		border-radius: 0.3rem;
		display: flex;/* 弹性盒子 */
		align-items: center;/* 垂直居中 */
	}
	.categorytab1 .title-ul li{
		width: 25%;
		text-align: center;
		line-height: 2rem;
		font-size: 0.35rem;
		font-weight: bold;
		border-radius: 4rem;
		position: relative;/* 相对定位 */
		color: #F5AB35;
	}
	.categorytab1 .title-ul .default{
		
		background-color: white;
		border: 0.1rem solid #e6e6e6;
		
	}
	/* 加载更多 */
	.categorytab1 p{
		width: 99%;
		line-height: 2rem;
		text-align: center;
		border: 0.01rem solid gray;
		border-radius: 6rem;
		
	}
</style>
